<template>
  <div>
    <jxf-table class="mt20" :table="dataTable" @deleteItem="deleteItem" @showItem="showItem" @onHandleSelectionChange="onHandleSelectionChange">
      <template slot="status_value" slot-scope="user">
        {{user.row.status_value === "1" ? "注销":"常客"}}
      </template>
    </jxf-table>
    <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                   @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
  </div>
</template>

<script>


  export default {
    name: 'TableDemo',
    data(){
      return {
        dataTable: {
          border:true,
          loading:true,
          hasSelect:true,
          hasOperation:true,
          tr: [
            {
              id: '1',
              label: '用户名',
              prop: 'username',
              show: 'template',
              className: 'username'
            },
            {
              id: '2',
              label: '真实姓名',
              prop: 'real_name'
            },
            {
              id: '3',
              label: '性别',
              prop: 'sex_value'
            },
            {
              id: '11',
              label: '客服',
              prop: 'agent_name',
              className:" specialColumn"
            },
            {
              id: '7',
              label: '渠道',
              prop: 'channel_id'
            },
            {
              id: '8',
              label: '注册时间',
              prop: 'regist_time',
              minWidth: '150'
            },
            {
              id: '9',
              label: '上次登录时间',
              prop: 'login_time',
              minWidth: '150'
            },
            {
              id: '10',
              label: '用户状态',
              show: 'template',
              prop: 'status_value'
            }
          ],
          operation: [{
            label:"操作",
            minWidth:"200",
            data:[
              {
                id:"1",
                label:"删除",
                Fun:"deleteItem"
              },
              {
                id:"2",
                label:"查看详情",
                type:"text",
                Fun:"showItem"
              }
            ]
          }],
          data: [{
            username:"1111111",
            agent_name:"客服1",
            status_value:"1"
          }]
        },
        pageTotal:40,
        pageSize:20,
        currentPage:2
      }
    },
    methods: {
      deleteItem(a,b){
        console.log("deleteItem")
        console.log(b)
      },
      showItem(a,b){
        console.log("showItem")
        console.log(b)
      },
      onHandleSelectionChange(val){
        console.log("onHandleSelectionChange")
        console.log(val)
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
      },
      // 切换条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
      }
    },
    created() {
      this.dataTable.loading = false
    }
  }
</script>

<style lang="scss">
</style>
